<template>
	<div class="div">
		<div style="display: flex;height: 60px;">
			<div style="width: 25%;"></div>

			<div class="ssk">
				<div style="width: 70%;">
					<el-input v-model="input" placeholder="请输入内容"></el-input>
				</div>
				<div>
					<el-button type="primary" icon="el-icon-search"></el-button>
				</div>
			</div>

			<div class="gwc">
				<router-link to="/pc/gwc">
					<button>
						&nbsp;&nbsp;&nbsp;
						<i class="el-icon-shopping-cart-full"></i>
						&nbsp;我的购物车&nbsp;&nbsp;&nbsp;
					</button>
				</router-link>
			</div>
		</div>

		<div class="div2">
			<div style="width: 75%;">
				<router-link to="/pc/home">
					<span style="font-size: 16px;">返回商品列表页</span>
				</router-link>
			</div>
		</div>

		<div style="display: flex;">
			<div class="div3">
				<div>
					<div class="div4">
						<div class="el-image">
							<img :src="`http://127.0.0.1/api/public/showimg/${book.pic}`" />
						</div>
					</div>
				</div>
			</div>

			<div class="book">
				<h2>{{book.name}}</h2>
				<div>
					<table>
						<tr>
							<td>类别</td>
							<td>
								<b>{{book.type.name}}</b>
							</td>
						</tr>
						<tr>
							<td>出版社</td>
							<td>
								<b>{{book.maker}}</b>
							</td>
						</tr>
						<tr>
							<td>作者</td>
							<td>
								<b>{{book.author}}</b>
							</td>
						</tr>
						<tr>
							<td>出版时间</td>
							<td>
								<b>{{book.tmake}}</b>
							</td>
						</tr>
						<tr>
							<td>出版号</td>
							<td>
								<b>{{book.sn}}</b>
							</td>
						</tr>
						<tr>
							<td>价格</td>
							<td>
								<b>{{book.price}}</b>
							</td>
						</tr>
						<tr>
							<td>促销价</td>
							<td>
								<b>{{book.price2}}</b>
							</td>
						</tr>
						<tr>
							<td>库存量</td>
							<td>
								<b>{{book.stock}}</b>
							</td>
						</tr>
						<tr>
							<td>销售量</td>
							<td>
								<b>{{book.salenum}}</b>
							</td>
						</tr>
						<tr>
							<td></td>
							<td>
								<button>
									&nbsp;&nbsp;&nbsp;
									<i class="el-icon-shopping-cart-full"></i>
									&nbsp;加入购物车&nbsp;&nbsp;&nbsp;
								</button>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<div class="info">
			<div class="title">
				<h5>商品详情</h5>
			</div>
			<div class="wz">
				<div>
					<p>{{book.info}}</p>
				</div>
			</div>
		</div>

		<div class="pl">
			<div>
				<h5>商品评价</h5>
			</div>

			<div class="my">
				<div class="img">
					<span>
						<img :src="`http://127.0.0.1/api/public/showimg/${img}`" />
					</span>
				</div>
				<div class="input">
					<textarea rows="2" placeholder="万水千山总是情,评论2句..."></textarea>
					<div class="daf">
						<div class="statr">
							<span>
								打分
							</span>
							<el-rate v-model="value1"></el-rate>
						</div>
						<el-button type="primary">发布</el-button>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'PcBookDetail',
		data() {
			return {
				input: '',
				book: {},
				img: '',
				list:[],
			}
		},
		created() {
			this.$get('/api/public/book/findById/' + this.$route.params.bookid).then((resp) => {
				this.book = resp.data.data;
				this.$get('/api/public/rate/findByBookid/'+this.$route.params.bookid+'/1/3').then((rsp)=>{
					this.list = rsp.data.data.comments;
					this.img = this.$store.state.img;
				})
				console.log(this.list);
			})
		}
	}
</script>

<style scoped>
	.div {
		margin-top: 40px;
		margin-right: 8%;
		margin-left: 8%;
		min-height: 88vh;
	}

	.div .ssk {
		width: 50%;
		display: flex;
		line-height: 30px;
		justify-content: center;
		align-items: flex-end;
		border: rgb(0, 0, 128);
	}

	.div .ssk .el-input {
		font-size: 14px;
	}

	.gwc {
		width: 25%;
		height: 100px;
		line-height: 36px;
		margin-left: 140px;
	}

	.gwc button {
		background-color: rgb(255, 78, 0);
		color: white;
		border: none;
		height: 40px;
		margin-top: 30px;
	}

	.div2 {
		margin-top: 2vh;
		margin-bottom: 2vh;
		height: 27px;
		border-bottom: 2px solid orangered;
		display: flex;
	}

	.div2 a {
		color: black;
	}

	.div2 a:hover {
		color: orangered
	}

	.div3 {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.div4 {
		width: 28vw;
		height: 25vw;
		border: 1px solid rgb(220, 223, 230);
		overflow: hidden;
	}

	.div4 img {
		width: 100%;
		height: 100%;
	}

	.div4 .el-image {
		width: 120%;
		height: 110%;
		left: -10%;
		top: -5%;
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	.book {
		width: 30%;
		line-height: 32px;
	}

	.book h2 {
		color: rgb(144, 147, 153);
	}

	.book table {
		width: 70%;
		font-size: 0.1em;
		line-height: 35px;
	}

	.book table tr td button {
		background-color: rgb(255, 78, 0);
		color: white;
		border: none;
		height: 30px;
		margin-top: 30px;
	}

	.info {
		margin-top: 5px;
		padding-left: 20px;
	}

	.info .title {
		border-bottom: 1px solid lightcoral;
	}

	.info .title h5 {
		color: lightcoral;
	}

	.info .wx {
		min-height: 3vw;
		margin-bottom: 2vw;
		font-size: 0.1em;
		font-weight: 500;
		display: flex;
	}

	.pl {
		margin-top: 10px;
		padding-left: 20px;
	}

	.pl h5 {
		color: blueviolet;
	}

	.pl .my {
		display: flex;
		max-height: 120px;
		overflow: hidden;
	}

	.pl .my .img {
		width: 80px;
		padding-top: 5px;
	}

	.pl .my .img span {
		height: 70px;
		width: 70px;
		line-height: 70px;
	}

	.pl .my .img apan img {
		display: block;
		height: 100%;
		vertical-align: middle;
	}

	.pl .my .input {
		width: 100%;
		line-height: 24px;
		height: 80px;
	}

	.pl .my .input textarea {
		height: 45px;
		max-height: 45px;
		min-height: 45px;
		width: 90%;
		max-width: 90%;
		min-width: 90%;
	}

	.pl .my .input .daf {
		width: 50%;
		display: flex;
	}

	.pl .my .input .daf .statr {
		width: 250px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pl .my .input .daf .statr span {
		color: blueviolet;
		font-size: 1.1em;
	}
</style>